<template>
  <view class="login-page">
    <view class="head-line"></view>
    <view class="login-banner"></view>
    <view class="login-form">
      <view class="login-title">
        <image
          style="width: 64rpx; height: 64rpx; flex-shrink: 0"
          src="~@/static/img/logo.png"
        ></image>
        <text class="title-name">茂名市茂南区食品监管追溯系统快检端</text>
      </view>
      <uni-forms
        err-show-type="toast"
        ref="form"
        labelWidth="80"
        :modelValue="formData"
        label-position="left"
      >
        <uni-forms-item class="first_item" label="用户名" name="user">
          <uni-easyinput
            type="text"
            :inputBorder="false"
            v-model="formData.user"
            placeholder="请输入用户名"
          />
        </uni-forms-item>
        <uni-forms-item class="last_item" label="密  码" name="psw">
          <uni-easyinput
            v-model="formData.psw"
            :inputBorder="false"
            :passwordIcon="showClearPwd"
            type="password"
            placeholder="请输入密码"
          />
        </uni-forms-item>
        <uni-data-checkbox
          multiple
          v-model="isCheck"
          :localdata="localdata"
        ></uni-data-checkbox>
      </uni-forms>
    </view>
    <view class="btn-wrap">
      <view @click="submit" class="i-btn login-btn">登录</view>
    </view>
    <view class="foot">
      <text></text>
    </view>
  </view>
</template>

<script>
import { hex_md5 } from "@/utils/md5.js";
import { getUserIdByUsername, getToken } from "@/api";

export default {
  data() {
    return {
      appTitle: "",
      isCheck: [0],
      localdata: [
        {
          text: "记住密码",
          value: 1,
        },
      ],
      loading: false,
      // 表单数据
      formData: {
        user: "", // cskjjg
        psw: "", // gziscas.407
      },
      showClearPwd: false,
      code: "",
      userId: "",
      username: "",
      alreadyLogin: false,
    };
  },
  onLoad() {
    this.getStorageData();
  },
  onShow() {
    // let pagearr = getCurrentPages(); //获取应用页面栈
    // let currentPage = pagearr[pagearr.length - 1]; //获取当前页面信息
    // console.log("option:", currentPage.options); //获取页面传递的信息
    // let option = currentPage.options;
    //  如果不是用户主动退出登录，则继续跳转首页
    // if (!option.logout ) {
    if (this.alreadyLogin) {
      uni.navigateTo({
        url: `/pages/index/index?userId=${this.userId}&username=${this.username}`,
      });
    }
    // }
  },
  onReady() {},
  methods: {
    async getUserId() {
      this.username = this.formData.user;
      const tokenRes = await getToken({
        username: this.username,
        password: hex_md5(this.formData.psw),
      });
      console.log("准备校验");
      if (tokenRes.code === "0") {
        // console.log(tokenRes.data);
        const ecafeToken = tokenRes.data;
        const res = await getUserIdByUsername(this.username, ecafeToken);
        console.log("!!!!res:", res);
        if (res.code === "0") {
          this.userId = res.data.id;
          uni.navigateTo({
            url: `/pages/index/index?userId=${this.userId}&username=${this.username}`,
          });
          this.alreadyLogin = true;
        }
      } else {
        uni.showToast({
          title: "账号或密码错误",
          duration: 2000,
          icon: "none",
        });
      }
    },
    async submit() {
      this.formData.user = this.formData.user.trim();
      this.formData.psw = this.formData.psw.trim();
      if (this.formData.user === "" || this.formData.psw === "") {
        uni.showToast({
          title: "请输入完整信息",
          icon: "none",
        });
        return false;
      }
      // 记住密码
      if (this.isCheck["0"]) {
        uni.setStorageSync("isCheck", this.isCheck[0] || "");
        uni.setStorageSync("loginData", JSON.stringify(this.formData));
      }
      this.getUserId();
    },
    getStorageData() {
      let isCheck = uni.getStorageSync("isCheck")
        ? uni.getStorageSync("isCheck")
        : 0;
      let loginData = uni.getStorageSync("loginData")
        ? JSON.parse(uni.getStorageSync("loginData"))
        : "";
      // let autoLogin = uni.getStorageSync("autoLogin");
      this.isCheck = [isCheck];
      this.formData = {
        user: loginData.user,
        psw: isCheck ? loginData.psw : "",
      };
      // this.loginData = loginData;
      // //系统退出登录后可以自动登录，用户手动退出登录后不能自动登录
      // if (autoLogin && this.formData.user && this.formData.psw) {
      //   this.submit();
      // }
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/mixin.scss";

.head-line {
  background-color: #4c77d1;
}

.title-name{
	font-size: 32rpx;
}

.login-banner {
  height: 400rpx;
  background-size: cover;
  background-repeat: no-repeat;
}

.login-page {
  height: 100%;
  box-sizing: border-box;
  background-color: #fff;

  .login-banner {
    background-image: url(https://fsqygs.fsamr.foshan.gov.cn/fstrade/fsMarketWeb/banner/banner.png);
  }
}

.login-title {
  display: flex;
  align-items: center;
  font-size: 44rpx;
  margin-bottom: 80rpx;

  text {
    padding-left: 16rpx;
  }
}

.login-form {
  position: relative;
  margin-top: -40rpx;
  background: #ffffff;
  border-radius: 40rpx;
  padding: 58rpx;
  z-index: 2;

  .uni-forms {
    overflow: hidden;
  }

  ::deep.uni-forms-item__label {
    color: #333;
    margin: 0;
    padding: 0;
    height: auto;
  }

  ::deep.uni-forms-item__label .label-text {
    color: #333333;
    font-size: 33rpx;
  }

  ::deep.uni-forms-item__inner {
    padding-bottom: 0;
  }

  ::deep.uni-forms-item {
    border-bottom: 2rpx solid #e5e5e5;
  }

  ::deep .first_item {
    .uni-forms-item {
      margin-bottom: 64rpx;
    }
  }

  ::deep .last_item {
    .uni-forms-item {
      margin-bottom: 24rpx;
    }
  }

  ::deep.uni-easyinput__content-input {
    padding-left: 0 !important;
  }
}

::deep {
  .checklist-text {
    margin-right: 10rpx;
  }
}

.btn-wrap {
  position: relative;
  margin-top: -16rpx;
  padding: 0 64rpx;
  z-index: 2;

  .login-btn {
    border-radius: 50rpx;
    margin: 0 10rpx;
    font-weight: bold;
    box-shadow: 0 8rpx 32rpx 2rpx rgba(24, 78, 178, 0.3),
      0 4rpx 8rpx 2rpx rgba(255, 255, 255, 0.5);
  }

  .i-btn {
    height: 88rpx;
    line-height: 88rpx;
    background: #4277d9;
    color: #fff;
    font-size: 15px;
    text-align: center;
  }
}

.foot {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-image: url(~@/static/img/login_foot.png);
  background-position: bottom;
  background-size: contain;
  text-align: center;
  background-repeat: no-repeat;
  z-index: 1;

  text {
    display: block;
    font-size: 24rpx;
    line-height: 28rpx;
    color: #909399;
    padding-bottom: 116rpx;
  }
}
</style>
